<template>

  <div id="my_tran">
      <div>
          <van-nav-bar title="我的交易" left-text="返回"  left-arrow  @click-left="$router.go(-1)" />
      </div>
      <div>
          <van-tabs v-model="active" >
            <van-tab title="发起交易">
                <van-list  :finished="finished"  finished-text="没有更多了" >
                        
                         <div data_list >
                               <!-- <p>数据显示类型</p> -->
                                <div class="data_view" v-for="(item, indx) in box1_data">
                                    
                                         
                                     <div style="border-top: 1px solid #333333;" v-if="indx==0" >
                                       <span img><span ></span><span></span></span>
                                       
                                       <span >价格</span>
                                       <span>数量</span> 
                                       <span style="flex:2;" >时间</span>
                                       <span >状态</span>
                                 
                                    </div>    
                                    
                                          <div style="border-top: 1px solid #333333;" :data_uid="item.id" @click="orderDetail($event,item.id,1)">
                                                <span img><img   :src="item.type==1? require('../../assets/img/transaction_3.png'):require('../../assets/img/transaction_2.png') " /><span v-if="item.type==1">卖出</span><span v-if="item.type==2">买入</span></span>
                                                
                                                <span v-html="item.price"></span> <span v-html="item.number"></span> <span style="flex:2;" v-html="base.formatDate(item.c_time)"></span>
                                                <span >待成交</span>
                                              
                                            </div>
                                  
                                  
                                </div>
                                <div v-if="box1_data.length==0" class="no_data">没有更多了</div>
                            </div>
                </van-list>
            </van-tab>
            <van-tab title="通知交易">
                 <van-list  :finished="finished"  finished-text="没有更多了" >
                        
                         <div data_list >
                               <!-- <p>数据显示类型</p> -->
                                <div class="data_view" v-for="(item, indx) in box2_data">
                                     <div style="border-top: 1px solid #333333;" v-if="indx==0">
                                       <span img><span ></span><span></span></span>
                                       
                                       <span >价格</span>
                                       <span>数量</span> 
                                       <span style="flex:2;" >时间</span>
                                       <span >状态</span>
                                 
                                    </div>    
                                   <div style="border-top: 1px solid #333333;" :data_uid="item.id" @click="orderDetail($event,item.id,2)">
                                       <span img><img   :src="item.type==1? require('../../assets/img/transaction_3.png'):require('../../assets/img/transaction_2.png') " /><span v-if="item.type==1">卖出</span><span v-if="item.type==2">买入</span></span><span v-html="item.price"></span> <span v-html="item.number"></span> <span style="flex:2;" v-html="base.formatDate(item.c_time)"></span>
                                       <span >待成交</span>
                                       
                                    </div>
                                  
                                </div>
                                 <div v-if="box2_data.length==0" class="no_data">没有更多了</div>
                            </div>
                </van-list>
            </van-tab>
          <van-tab title="交易处理">
                 <van-list  :finished="finished"  finished-text="没有更多了" >
                        
                         <div data_list >
                               <!-- <p>数据显示类型</p> -->
                                <div class="data_view" v-for="(item, indx) in box4_data">
                                     <div style="border-top: 1px solid #333333;" v-if="indx==0">
                                       <span img><span ></span><span></span></span>
                                       
                                       <span >价格</span>
                                       <span>数量</span> 
                                       <span style="flex:2;" >时间</span>
                                       <span >状态</span>
                                 
                                    </div>    
                                   <div style="border-top: 1px solid #333333;" :data_uid="item.id" @click="orderDetail($event,item.id,4)">
                                       <span img><img   :src="item.type==1? require('../../assets/img/transaction_3.png'):require('../../assets/img/transaction_2.png') " /><span v-if="item.type==1">卖出</span><span v-if="item.type==2">买入</span></span><span v-html="item.price"></span> <span v-html="item.number"></span> <span style="flex:2;" v-html="base.formatDate(item.c_time)"></span>
                                       <span>待放币</span>
                                       
                                    </div>
                                  
                                </div>
                                 <div v-if="box4_data.length==0" class="no_data">没有更多了</div>
                            </div>
                </van-list>
            </van-tab>
              <van-tab title="交易记录">
                 <van-list  :finished="finished"  finished-text="没有更多了" >
                        
                         <div data_list >
                               <!-- <p>数据显示类型</p> -->
                                <div class="data_view" v-for="(item, indx) in box3_data">
                                     <div style="border-top: 1px solid #333333;" v-if="indx==0">
                                       <span img><span ></span><span></span></span>
                                       
                                       <span >价格</span>
                                       <span>数量</span> 
                                       <span style="flex:2;" >时间</span>
                                       <span >状态</span>
                                 
                                    </div>    
                                   <div style="border-top: 1px solid #333333;" :data_uid="item.id" @click="orderDetail($event,item.id,3)">
                                       <span img><img   :src="item.type==1? require('../../assets/img/transaction_3.png'):require('../../assets/img/transaction_2.png') " /><span v-if="item.type==1">卖出</span><span v-if="item.type==2">买入</span></span><span v-html="item.price"></span> <span v-html="item.number"></span> <span style="flex:2;" v-html="base.formatDate(item.c_time)"></span>
                                       <span  v-if="item.status==3">已完成</span>
                                       <span  v-if="item.status==2">待放币</span>
                                      
                                    </div>
                                  
                                </div>
                                 <div v-if="box3_data.length==0" class="no_data">没有更多了</div>
                            </div>
                </van-list>
            </van-tab>
            </van-tabs>
      </div>
  </div>


</template>

<script>
import footer from "../footer/footer";

export default {
 name: "login",
data() {
    return {    
            active:0,
              list: [],
                loading: false,
                finished: false,
                box1_data:[],
                box2_data:[],
                box3_data:[],
                box4_data:[],
                }
},
 
mounted() { 
  let that=this;
    that.base.head_status()
    
    

    

       that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});

       that.axios_b.all([that.myorder_medl(1), that.myorder_medl(2), that.myorder_medl(3),that.myorder_medl(4)])
        .then( that.axios_b.spread(function (acct, perms) {
              that.$toast.clear();
        }));
    
},

 methods: { 
      onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 500);
    },
    orderDetail(elem,uid,type){
             
                  this.$router.push({ name: 'orderDetail', params: {id: uid,type:type}})
            
    },
       myorder_medl(num){

         let that=this;

        var data={token:JSON.parse(localStorage.userinfo).token,type:num}
      
               
            
                       that._API.myorder(data).then(res => {
                           
                           
                                 if(res.code==200){
                                     if(num==1){
                                        that.box1_data=res.data;
                                     }else if(num==2){
                                         that.box2_data=res.data;
                                     }else if(num==3){
                                         that.box3_data=res.data;
                                     }else if(num==4){
                                         that.box4_data=res.data;
                                     }
                                    
                                       
                                 }else{

                                    if(num==1){
                                         that.box1_data=[];
                                     }else if(num==2){
                                         that.box2_data=[];
                                     }else if(num==3){
                                         that.box3_data=[];
                                     }else if(num==4){
                                         that.box4_data=[];
                                     }
                                  
                                     // that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => { });
                                 }
                         
                          
                            
                         
                        }).catch(err => {  
                            console.log("err", err);
                        });
    },


      }
}
</script>



<style  lang="less" lang="scss" scoped>


    /deep/.van-nav-bar,/deep/.van-tabs__nav,/deep/.van-cell{background-color: initial;}
    /deep/.van-nav-bar .van-icon,/deep/.van-nav-bar__title,/deep/.van-nav-bar__text,/deep/.van-tab__text,/deep/.van-cell__title{color:white}
    /deep/.van-nav-bar__title{font-size: 1rem;}
    /deep/.van-tab__text{font-size: .8rem;}
    /deep/.van-cell:not(:last-child)::after{border-bottom: 1px solid #494d52;}
    /deep/.van-tabs__line{background-color:#831BFA}

     [data_list] p{line-height: 2.5rem;padding: 0 .5rem;color:#00C6FF}
     .data_view>div{display: flex;padding: 1rem 0.5rem;border-bottom: 1px solid #333333;} 
     .data_view span{flex:1;text-align: center;font-size: 0.7rem;}
     .data_view [img]{display: flex;align-items: center;justify-content: center;}
     .data_view img{width: 1rem;}
    .no_data{text-align: center;padding-top: 10%;color: #b0b1b1;}
</style>
